<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>vue-事件处理</title>
		<script src="../js/vue.js"></script>
		<style>
			textarea{
				width: 450px;
				height: 300px;
				padding: 20px;
			}
		</style>
	</head>

	<body>

		<div class="test-07">
			<button v-on:click=" clickNum += 1">加1</button>
			<li>点击次数{{ clickNum }}</li>
			
			<button @click="wran('这是一个消息',$event)">访问原始事件对象</button>
			
			<br/>
			<textarea disabled>
<!-- 停止点击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重新载入页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以链式调用 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时，使用事件捕获模式 -->
<!-- 也就是说，内部元素触发的事件先在此处处理，
	然后才交给内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只有在 event.target 是元素自身时，才触发处理函数。 -->
<!-- 也就是说，event.target 是子元素时，不触发处理函数 -->
<div v-on:click.self="doThat">...</div>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
<!--使用修饰符时的顺序会产生一些影响，因为相关的代码会以相同的顺序生成。
所以，使用 v-on:click.prevent.self 会阻止所有点击，
而 v-on:click.self.prevent 只阻止元素自身的点击。-->
<!-- 滚动事件的默认行为（滚动）将立即发生， -->
<!-- 而不是等待 `onScroll` 完成后才发生， -->
<!-- 以防在滚动事件的处理程序中含有 `event.preventDefault()` 调用 -->
<div v-on:scroll.passive="onScroll">...</div>
			</textarea>
		</div>

		<script>
			var test = {
				clickNum: 0
			}
			var vm = new Vue({
				el: ".test-07",
				data: test,
				methods: {
					wran: function(msg,event) {
						event = event ||window.event;
						if(event) event.preventDefault();
						alert(msg+event);
					}
				},
				//计算属性computed
				computed: {
					
				},
				//侦听属性watch
				watch: {

				}
			});
			
		</script>
	</body>

</html>